<!--
 * @description: 主题模式
 * @Author: Islands
 * @Date: 2024-06-19 20:15:54
 * @LastEditTime: 2024-06-20 19:20:56
-->
<script lang="ts" setup>
import { useTheme } from "@/hooks/store/index";
const { activeChange, theme, component } = useTheme();
</script>
<template>
  <el-divider content-position="center"
    ><span class="font-size-4">{{ $t(`title.layoutMode`) }}</span></el-divider
  >
  <div class="between-justify-align" style="padding: 10px 50px">
    <el-row :gutter="80">
      <el-col
        :span="12"
        style="padding-bottom: 15px"
        v-for="item in component"
      >
        <component
          :is="item.label"
          @click="activeChange(item.value)"
          :class="theme === item.value ? 'is_active' : 'no_active'"
        ></component>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100px;
  height: 70px;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0px 0px 5px #888888;
  cursor: pointer;
  &:hover {
    border: 1px solid var(--ep-color-primary);
  }
}
.no_active {
  border: 1px solid #fff;
}
</style>
